import { Modal, Form, Space, Button, message, Row, Col, Select } from 'antd';
import React, { useState, useEffect } from 'react';
import { useIntl } from 'umi'
import { queryEnabledUserRoughInfoList } from '../../../services/user';
import { createTeamUser } from '../../../services/team/user';
import { queryDictDataByDictType } from '../../../services/dictData';
import { SELECT_VALUE, SELECT_LABEL, STATUS_YES } from '../../../constants';
import { TEAM_ROLE_TYPE } from '../../../constants/dictType'
function AddTeamUserPanel({ data, closePanel,reloadParentData }) {
    const intl = useIntl();
    const [form] = Form.useForm();
    const [userList, setUserList] = useState();
    const [teamRoleList, setTeamRoleList] = useState()
    const [open, setOpen] = useState(true);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [selectLoading, setSelectLoading] = useState(true)

    useEffect(() => {
        queryUserList()
        queryTeamRoleList()
        
    }, [])


    let queryUserList = async (context) => {
        await queryEnabledUserRoughInfoList({ context }).then(res => {
            if (res.success) {
                setUserList(res?.data)
                setSelectLoading(false)
            }
        }).catch(err => {
            console.log(err);
            setSelectLoading(false)
        })
    }
    let queryTeamRoleList = async () => {
        await queryDictDataByDictType({ type: TEAM_ROLE_TYPE }).then(res => {
            if (res.success) {
                setTeamRoleList(res?.data)
            }
        }).catch(err => {
            console.log(err);
        })
    }

    const handleOk = async (formData) => {
        let form = {teamUnCode:data.unCode}
        userList.forEach(user => {
            if (user.unCode === formData.userUnCode) {
                form.userUnCode = formData.userUnCode
                form.userName = user.username
                return
            }
        })
        teamRoleList.forEach(role => {
            if (role.unCode === formData.roleUnCode) {
                form.userRoleUnCode = formData.roleUnCode
                form.userRoleName = role.name
                return
            }
        }
        )
        setConfirmLoading(true)
        await createTeamUser(form).then(res =>{
            if(res.success){
                message.success(res.msg)
                reloadParentData()
                setConfirmLoading(false)
                handleCancel()
            }
        })
    }
    const handleCancel = () => {
        setOpen(false);
    };
    return (
        <>
            <Modal
                title={intl.formatMessage({
                    id: 'app.team.user.model.title',
                    defaultMessage: '新增队员'
                })}
                open={open}
                destroyOnClose={true}
                onCancel={handleCancel}
                afterClose={closePanel}
                width={290}
                centered={true}
                footer={false}
            >
                <Form onFinish={handleOk}>
                    <Form.Item
                        label={intl.formatMessage({
                            id: 'app.team.user.form.lable.username',
                            defaultMessage: '名称'
                        })}
                        name="userUnCode"
                        rules={[
                            {
                                required: true,
                                message: intl.formatMessage({
                                    id: 'app.team.user.form.rule.message.username',
                                    defaultMessage: '请选择成员'
                                }),
                            },
                        ]}
                    >
                        <Select
                            style={{
                                width: '200px',
                            }}
                            showSearch
                            loading={selectLoading}
                            placeholder="请输入账号或用户名"
                            fieldNames={{ label: "username", value: SELECT_VALUE }}
                            optionFilterProp="username"
                            onSearch={(value) => {
                                setSelectLoading(false)
                                queryUserList(value)
                            }}
                            options={userList}
                        />
                    </Form.Item>
                    <Form.Item
                        label={intl.formatMessage({
                            id: 'app.team.user.form.lable.role',
                            defaultMessage: '角色'
                        })}
                        name="roleUnCode"
                        rules={[
                            {
                                required: true,
                                message: intl.formatMessage({
                                    id: 'app.team.user.form.rule.message.role',
                                    defaultMessage: '请选择角色'
                                }),
                            },
                        ]}
                    >
                        <Select
                            style={{
                                width: '200px',
                            }}
                            showSearch
                            loading={selectLoading}
                            placeholder="请输入队伍角色"
                            fieldNames={{ label: SELECT_LABEL, value: SELECT_VALUE }}
                            optionFilterProp={SELECT_LABEL}
                            onSearch={(value) => {
                                setSelectLoading(false)
                                queryTeamRoleList(value)
                            }}
                            options={teamRoleList}
                        />

                    </Form.Item>
                    <Row justify="end">
                        <Col>
                            <Space>
                                <Button htmlType="button" onClick={handleCancel}>
                                    {intl.formatMessage({
                                        id: 'component.button.cancel',
                                    })}
                                </Button>
                                <Button type="primary" htmlType="submit" loading={confirmLoading}>
                                    {intl.formatMessage({
                                        id: 'component.button.submit',
                                    })}
                                </Button>
                            </Space>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        </>
    )
}
export default AddTeamUserPanel;